<template>
  <Layer :layer="layer" @confirm="submit(ruleForm)" ref="layerDom">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      style="margin-right: 30px"
    >
      <el-form-item label="名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="数字：" prop="number">
        <el-input
          v-model="form.number"
          oninput="value=value.replace(/[^\d]/g,'')"
          placeholder="只能输入正整数"
        ></el-input>
      </el-form-item>
      <el-form-item label="选择器：" prop="select">
        <el-select v-model="form.choose" placeholder="请选择" clearable>
          <el-option
            v-for="item in selectData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单选框：" prop="radio">
        <el-radio-group v-model="form.radio">
          <el-radio
            v-for="item in radioData"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
    </el-form>
  </Layer>
</template>

<script setup lang="ts">
import { ref, reactive, defineComponent } from "vue";
import type { LayerType } from "@/components/layer/index.vue";
import type { Ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

import { add, update } from "@/api/table";
import Layer from "@/components/layer/index.vue";

// 接受props
const props = defineProps(["layer"]);

// 表单数据
let form = ref({
  name: "",
  choose: "",
  radio: "",
  number: "",
});

// ref 表单实例
const ruleForm = ref<FormInstance>();

// 提交
const submit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (!valid) {
      return;
    }
    console.log("提交成功");
  });
};

const selectData = [
  { value: 1, label: "运动" },
  { value: 2, label: "健身" },
  { value: 3, label: "跑酷" },
  { value: 4, label: "街舞" },
];

const radioData = [
  { value: 1, label: "今天" },
  { value: 2, label: "明天" },
  { value: 3, label: "后天" },
];

// 表单验证
const rules = {
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  number: [{ required: true, message: "请输入数字", trigger: "blur" }],
  choose: [{ required: true, message: "请选择", trigger: "blur" }],
  radio: [{ required: true, message: "请选择", trigger: "blur" }],
};
</script>

<style lang="scss" scoped></style>
